---
title: 整合
---

import { SiAngular, SiAstro, SiNextdotjs, SiReact, SiVuedotjs, SiWebcomponentsdotorg } from '@icons-pack/react-simple-icons'

Univer 支援與各種 UI 函式庫與框架的整合，讓您能在不同環境中使用 Univer。不論是 React、Vue 還是 Angular，Univer 都能提供無縫的整合體驗。

如果你對目前使用的框架或函式庫已經熟悉，可直接前往對應的整合指南：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="React 整合指南"
    href="/guides/sheets/getting-started/integrations/react"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Vue 整合指南"
    href="/guides/sheets/getting-started/integrations/vue"
 />
  <Card
    icon={<SiWebcomponentsdotorg className="text-indigo-400" />}
    title="Web Component 整合指南"
    href="/guides/sheets/getting-started/integrations/web-component"
 />
</Cards>

我們也為想透過建立全新專案來整合 Univer 的使用者，提供了快速起步範本。你可以點選下列對應連結以取得這些範本：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="Univer ❤️ Vite + React"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-react"
 />
  <Card
    icon={<SiAngular className="text-red-400" />}
    title="Univer ❤️ Angular"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-angular"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vue CLI + Vue@2.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue2"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vite + Vue@3.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue3"
 />
  <Card
    icon={<SiNextdotjs className="text-zinc-800 dark:text-zinc-200" />}
    title="Univer ❤️ Next.js"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-nextjs"
 />
  <Card
    icon={<SiAstro className="text-pink-400" />}
    title="Univer ❤️ Astro"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-astro"
 />
</Cards>
